<template>
  <div>
    <div class="top"></div>
    <main v-if="status==true">
      <div class="logo">
        <div >
          <img  :src="liveDetailList.user.icon" alt="">
        </div>
        <p>{{liveDetailList.user.nick}}</p>
      </div>
      <p class="title">{{liveDetailList.title}}</p>
      <div class="time">
        <img src="http://www.songguolife.com/nuts/images/lable_time.png" alt="">
        <span>{{liveDetailList.st}}</span>
        <img src="http://www.songguolife.com/nuts/images/lable_seat.png" alt="">
        <span>{{liveDetailList.numAttendees}}人参加</span>
      </div>
      <div class="detailContent">
        <div v-for="(item,index) in liveDetailList.resource" :key="index">
          <p v-if="item.txt">{{item.txt}}</p>
          <img v-if="!item.txt" :style="{width:100+'%',height:'auto'}" :src="'http://image.songguolife.com/'+item.id+'?imageView2/0/w/750'" alt="">
        </div>
      </div>
      <div class="ligature">
        <div>我要参加连线</div>
      </div>
      <div class="share">
        <span>分享至: </span>
        <img src="http://www.songguolife.com/nuts/images/share_weibo.png" alt="">
      </div>
      <div class="wxfooter">
        <img src="http://image.songguolife.com//weixinfooter@2x.png?imageslim" alt="">
      </div>
    </main>
    <footer>
      <div>@2010-2016 生活·读书·新知三联书店</div>
    </footer>
  </div>
</template>

<script>
  import axios from "axios"

  export default {
    props: ["liveId"],
    data() {
      return {
        liveDetailList: [],
        status: false,
      }
    },
    mounted() {
      this.refresh()
    },
    methods: {
      refresh() {
        var axios_Api = "https://bird.ioliu.cn/v1/?url=";
        axios.get(axios_Api + "http://www.songguolife.com/api/live/classic/" + this.liveId).then((value) => {
          this.status = true,
          console.log(value)
          this.liveDetailList = value.data
        }, (err) => {
          console.log(err)
        })
      }
    }
  }
</script>

<style scoped>
  .top {
    width: 1040px;
    background-color: #f7f4f0;
    margin: 0 auto;
    height: 80px;
  }

  main {
    width: 900px;
    margin: 0 auto;
    margin-top: 100px;
  }

  main .logo {
    display: flex;
    justify-content: flex-start;
    margin: 25px 0;
  }

  main .logo > div:nth-child(1) {
    width: 60px;
    height: 60px;
    border: 1px solid red;
  }

  main .logo > div:nth-child(1) img {
    width: 100%;
    height: 100%;
  }

  main .logo > p {
    font-size: 18px;
    display: inline-block;
    margin: 0 0 10px 10px;
    color: #f40;
  }

  main .title {
    font-size: 30px;
    font-weight: bolder;
    color: #f50;
    text-align: center;
    border-top: 1px solid #f2f2f2;
  }

  main .time {
    margin-top: 20px;
  }

  main .time img {
    width: 24px;
    height: 24px;
    margin: 10px;
  }

  .ligature{
    width: 100%;
  }
  .ligature div{
    width: 220px;
    height: 50px;
    border-radius: 3px;
    background-color: rgb(255, 87, 34);
    color: #fff;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    margin: 80px auto;
  }

  .share span{
    font-size: 13px;
    color: #ccc;
  }
  .share img{
    width: 44px;
    height: 44px;
  }

  .wxfooter{
    width: 100%;
  }
  .wxfooter img{
    width: 100%;
    height: auto;
  }
  footer{
    width: 1040px;
    height: 80px;
    margin: 0 auto;
    background-color: #f7f4f0;
    color: gray;
    position: relative;
  }
  footer div{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 10px;
  }

  @media (max-width: 1040px) {
    .top {
      width: 100%;
    }
    footer{
      width: 100%;
    }
  }
  @media (max-width: 900px) {
    main {
      width: 100%;
    }
  }
  @media (max-width: 600px) {
    .top {
      display: none;
    }
    footer{
      display: none;
    }
  }
</style>
